<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="lib/celljs.js"></script>
    <script src="lib/common.js"></script>
    <script src="src/soso.maps.js"></script>
    <link rel="stylesheet" href="assets/style.css"/>
    <script src="lib/jquery-1.8.0.min.js"></script>
    <!--<script src="lib/uuCanvas/uuCanvas.js"></script>-->
    <link rel="stylesheet" href="index.css"/>
</head>
<body onload="init();">
<div id="fps"></div>
<div id="view" class="clearfix">
    <div id="panel">
        <div id="panel_content">
            <label><input disabled id="marked_location" type="text"></label><button id="mark">mark</button><button id="flyTo">flyTo</button>
        </div>
    </div>
    <div id="map"></div>
</div>
<script>
    var map;
    var renderMgr;
    var timeline;
    function init(){
        map = new soso.maps.Map($('#map').get(0));

        map.bindMapType('GOOGLE', new soso.maps.GoogleMapType());
        map.setMapTypeId('GOOGLE');
        map.setZoomLevel(15);
        map.setCenter(new soso.maps.LatLng(38.89816813905991, -77.02945411205174));

//        map.bindMapType('NEAR_MAP', new soso.maps.NearMapMapType());
//        map.setMapTypeId('NEAR_MAP');
//        map.setZoomLevel(15);
//        map.setCenter(new soso.maps.LatLng(-33.867387, 151.207629));

//        map.bindMapType('SOSO_MAP', new soso.maps.SosoMapType());
//        map.setMapTypeId('SOSO_MAP');
////        // 国家大剧院 wgs84
////        map.setCenter(new soso.maps.LatLng(39.903333, 116.383333));
//        // 国家大剧院 mars
//        map.setCenter(new soso.maps.LatLng(39.904728, 116.389751));
//        map.setZoomLevel(8);

        renderMgr = soso.maps.$renderMgr;
        timeline = soso.maps.$timeline;
        renderMgr.beforeExitFrame.addCallback(function (){
            timeline.stop();
            timeline.start();
            if (!renderMgr.isIdle()) {
                $('#fps')[0].style.display = '';
                $('#fps')[0].innerHTML = renderMgr.getFps();
                document.title = renderMgr.getFps();
            }
        });
        renderMgr.onIdle.addCallback(function (){
            setTimeout(function (){
                if (renderMgr.isIdle()) {
                    $('#fps')[0].style.display = 'none';
                }
            }, 128);
        });

        new soso.maps.NavigationControl(map);

        var markedLocation = map.getCenter();
        var markedLevel = map.getZoomLevel();
        $('#marked_location').val(markedLocation);
        $('#mark').on('click', function (){
            markedLocation = map.getCenter();
            markedLevel = map.getZoomLevel();
            $('#marked_location').val(markedLocation + '@' + markedLevel);
        });
        $('#flyTo').on('click', function (){
            map.flyTo(markedLocation, markedLevel);
        });

    }
//    soso.maps.$timeline.setSpeed(1/4);
</script>
</body>
</html>
